import React from 'react';
import { connect } from 'react-redux';
import { Col, Row } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';
import { Button, message, Upload } from 'antd'
import {  Space } from 'antd';


const props: UploadProps = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    progress: {
      strokeColor: {
        '0%': '#108ee9',
        '100%': '#87d068',
      },
      strokeWidth: 3,
      format: (percent) => percent && `${parseFloat(percent.toFixed(2))}%`,
    },
  };

export const huxing = (props: any) => {
  return (
    <div>
      <Row style={{ marginBottom: '20px' }}>
        <Col span={24}>
          所属楼盘
          <span style={{ marginLeft: '10px', color: '#666' }}> 五月花广场</span>
        </Col>
      </Row>
      <Row style={{ marginBottom: '20px' }}>
        <Col span={24}>
          户型名称 <input type="text" style={{ marginLeft: '10px'}} placeholder="户型名称" />
        </Col>
      </Row>
      <Row style={{ marginBottom: '20px' }}>
        <Col span={24}>
          房型 <input type="text" style={{ marginLeft: '40px'}} placeholder="户型名称" />
        </Col>
      </Row>
      <Row style={{ marginBottom: '20px' }}>
        <Col span={24}>
          面积 <input type="text" style={{ marginLeft: '40px'}} placeholder="户型名称" />
        </Col>
      </Row>
      <Row style={{ marginBottom: '20px' }}>
        <Col span={24}>
          销售状态 <input type="radio" style={{ marginLeft: '10px'}}  />在售
          <input type="radio" style={{ marginLeft: '10px'}}  />未售
          <input type="radio" style={{ marginLeft: '10px'}}  />售完
        </Col>
      </Row>
      <Row style={{ marginBottom: '20px' }}>
        <Col span={24}>
          户型图 
          <Upload {...props}>
    <Button icon={<UploadOutlined />}>上传头像</Button>
  </Upload>
        </Col>
        </Row>
        <Space wrap>
        <Button type="primary">提交</Button>
        </Space>
    </div>
  );
};

const mapStateToProps = (state: any) => ({});

export default connect(mapStateToProps)(huxing);
